<template lang="html">
  <div class="">
    <nav-header/>
    <nav-bread>
      <span>商品</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">排序规则:</span>
          <a href="javascript:void(0)" class="default cur">默认</a>
          <a href="javascript:void(0)" class="price" @click="sortGoods">价格
            <svg class="icon icon-arrow-short sort-up">
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">价格过滤</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}" >
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{'cur':priceChecked == 'all'}">All</a></dd>
              <dd v-for="(price,index) in priceFilter" @click="priceChecked=index">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" :class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>

            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>

                <li v-for="(item,index) in goodsList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+ item.productImage " alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn-cart" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>

              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="20">
                ...
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <!-- <div class="md-overlay" v-show="overLayFlag" @click="closePop"> -->
      <modal v-bind:mdShow="mdShow">
          <p slot="message">
            请先登录否则无法加入购物车
          </p>
          <div class="" slot="btnGroup">
            <a class="btn  btn--m" href="javascript:;" @click="mdShow = false">关闭</a>
          </div>
      </modal>
      <modal v-bind:mdShow="mdShowCart">
          <p slot="message">
            加入购物车成功
          </p>
          <div class="" slot="btnGroup">
            <a class="btn  btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
            <router-link class="btn  btn--m" href="javascript:;" to="/cart">查看购物车</router-link>
          </div>
      </modal>
      </div>
      <nav-footer/>
    </div>
  </div>
</template>

<script>
import './../assets/css/base.css'
import './../assets/css/login.css'
import './../assets/css/product.css'
import NavHeader from '@/components/Header.vue'
import NavFooter from '@/components/Footer.vue'
import NavBread from '@/components/NavBread.vue'
import Modal from './../components/Modal'
import axios from 'axios'
export default {
  data(){
    return {
      goodsList:Object,
      mdShow:false,
      mdShowCart:false,
      priceFilter: [
        {
          startPrice: '10.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '2000.00'
        }
      ],
      priceChecked:'all',
      filterBy:false,
      overLayFlag:false,
      sortFlag:true,
      page:1,
      pageSize:8,
      busy:true,
      priceLevel:this.priceChecked
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  },
  mounted: function(){
    this.getGoodsList();
  },
  methods: {
    getGoodsList(flag){
      var param = {
        page:this.page,
        pagesize: this.pageSize,
        sort:this.sortFlag?1:-1,
        priceLevel:this.priceChecked
      }
      axios.get("/goods/list",{
        params:param
      }).then((result)=>{
        var res = result.data;
        if(res.status == '0'){
          if (flag) {
            this.goodsList = this.goodsList.concat(res.result.list);

            if(res.result.count == 0){
              this.busy = true;
            }else{
              this.busy = false;
            }
          }else{
            this.goodsList = res.result.list;
            this.busy = false;
          }
        }else{
          this.goodsList = [];
        }
      });
    },
    sortGoods(){
      this.sortFlag = !this.sortFlag;
      this.page = 1;
      this.getGoodsList();
    }
    ,
    showFilterPop(){
      this.filterBy = true;
      this.overLayFlag = true;
    },
    setPriceFilter(index){
      this.priceChecked = index
      this.page = 1;
      this.getGoodsList();
      // this.closePop();
    },
    closePop(){
      this.filterBy = false;
      this.overLayFlag = false;
    },
    loadMore(){
      this.busy = true;
      setTimeout(() =>{
        this.page++;
        this.getGoodsList(true);
      },500)
    },
    addCart(productId){
      axios.post("/goods/addCart",{
        productId:productId
      }).then((res) => {
        var res = res.data
        if (res.status == 0) {
          // alert("加入成功");
          this.mdShowCart = true;
        }else{
          // alert("msg:" + res.msg);
          this.mdShow = true;
          this.mdShowCart = true;

        }
      })
    },
    closeMModal(){
      this.mdShow = false;
    }
  }
}
</script>

<style lang="css">
  .list-wrap ul:after{
    clear: both;
    content: '';
    height:0;
    display: block;
    visibility: hidden;
  }
  .load-more{
    height:100px;
    line-height: 100px;
    text-align: center;
  }
</style>
